<template>
  <v-app>
    <transition name="app1">
      <router-view />
    </transition>
  </v-app>
</template>
<script>
export default {
  data: vm => ({
    debugger: true,
    debuggerList: [
      { name: 'this.$router', value: vm.$router },
      { name: 'this.$route', value: vm.$route },
      { name: 'this.$store', value: vm.$store },
      { name: 'process.env', value: process.env },
      {
        name: 'window.location.xxx',
        value: {
          href: window.location.href,
          protocol: window.location.protocol,
          host: window.location.host,
          port: window.location.port,
          pathname: window.location.pathname,
          search: window.location.search
        }
      }
    ]
  }),
  created () {
    if (process.env.NODE_ENV === 'development' && this.debugger) {
      this.debuggerList.forEach((item, index) => {
        console.log(`%c${index + '.debugger'}%c${item.name}`,
          'background: #c100d1; padding: 5px; color: #fff; border-radius: 5px 0 0 5px',
          'background: #555; padding: 5px; color: #fff; border-radius: 0 5px 5px 0'
          , item.value)
      })
    }
  },
  mounted () {
    window.onresize = () => {
      this.$store.state.width = document.documentElement.clientWidth
      this.$store.state.height = document.documentElement.clientHeight
    }
  }
}
</script>
<style scoped>
* ::-webkit-scrollbar-track-piece {
  background-color: #09114C;
}
* ::-webkit-scrollbar {
  width: 4px;
  height: 0px;
}
* ::-webkit-scrollbar-thumb {
  border-radius: 20px !important;
  background-color: #2239E4;
  background-clip: padding-box;
  min-height: 10px;
}
* ::-webkit-scrollbar-thumb:hover {
  background-color: #2239E4;
}
</style>
<style>
/* 切换动画 */
.app-enter-active,
.app-leave-active {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transition: 0.5s;
  background: rgba(0, 0, 0, 0);
  z-index: 9999;
}
.app-enter {
  transform: translateX(0%);
  opacity: 0;
}
.app-leave-to {
  transform: translateX(0%);
}
@import url('./assets/css/xCommon.css');
</style>
